/**
 * 费用类别自定义字段设置提示文字
 */
import React from 'react'
import { connect } from 'react-redux'
import { messages, deepFullCopy } from "share/common";

import { LanguageInput } from 'components/index'
import Condition from 'components/condition'
const { If, Else } = Condition;

class CommentSetting extends React.Component{
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  handleNameChange = (value, i18n, attr) => {
    let { expenseType, nowWidget, nowSelectedIndex } = this.props;
    if (attr === 'titlePlaceholder') {
      expenseType.titlePlaceholder = value;
      this.props.onChange(expenseType, value, i18n)
    } else {
      nowWidget.placeholder = value;
      nowWidget.i18n = nowWidget.i18n || {};
      nowWidget.i18n.placeholder = i18n;
      expenseType.fields[nowSelectedIndex] = nowWidget;
      this.props.onChange(expenseType)
    }
  };

  render() {
    const { tenantMode, fieldType, expenseType, nowWidget } = this.props;
    return (
      <div className="comment-setting">
        <Condition>
          <If value={!~['BOOLEAN', 'COMPANY_PAID', 'START_DATE_AND_END_DATE'].indexOf(fieldType)}>
            <div className="widget-setting-title">{messages('setting.key2222')/*提示文字*/}</div>
            <Condition>
              <If value={fieldType === "comment"}>
                <LanguageInput
                  isEdit
                  name={expenseType.titlePlaceholder}
                  i18nName={(expenseType.i18n || {}).titlePlaceholder || []}
                  nameChange={(value, i18n) => this.handleNameChange(value, i18n, 'titlePlaceholder')}
                  disabled={!tenantMode}
                  inpRule={[{
                    length: 100,
                    language: "zh_cn"
                  }, {
                    length: 300,
                    language: "en"
                  }]}
                />
              </If>
              <Else>
                <LanguageInput
                  isEdit
                  name={nowWidget.placeholder}
                  i18nName={(nowWidget.i18n || {}).placeholder || []}
                  nameChange={this.handleNameChange}
                  disabled={!tenantMode}
                  inpRule={[{
                    length: 100,
                    language: "zh_cn"
                  }, {
                    length: 300,
                    language: "en"
                  }]}
                />
              </Else>
            </Condition>
          </If>
        </Condition>
      </div>
    )
  }
}

CommentSetting.propTypes = {
  fieldType: React.PropTypes.string,
  expenseType: React.PropTypes.object,
  nowWidget: React.PropTypes.object,
  nowSelectedIndex: React.PropTypes.number,
  onChange: React.PropTypes.func,
};

CommentSetting.defaultProps = {
  nowWidget: {}
};

function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode
  }
}

export default connect(mapStateToProps)(CommentSetting)
